﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>微信报名</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/app.css">

</head>
<body>
    <div class="page">
        <header class="bar bar-nav">
            <a href="course_enroll.html" class="icon icon-home pull-left"></a>
            <h1 class="title">个人中心</h1>
        </header>
        <div class="content">
            <!-- 这里是页面内容区 -->
        </div>
    </div>

    <!-- 菜单 -->
    <script type="text/html" id="tmplMenu">

        <div class="list-block">
            <ul>
                <li>
                    <a href="#/courses" class="item-content item-link">
                        <!--<div class="item-media"><i class="icon icon-f7"></i></div>-->
                        <div class="item-inner">
                            <div class="item-title">我的课程</div>
                            <div class="item-after"></div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#/activities" class="item-content item-link">
                        <div class="item-inner">
                            <div class="item-title">我的活动</div>
                            <div class="item-after"></div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#/history" class="item-content item-link">
                        <div class="item-inner">
                            <div class="item-title">历史记录</div>
                            <div class="item-after"></div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#/profile" class="item-content item-link">
                        <div class="item-inner">
                            <div class="item-title">设置</div>
                            <div class="item-after"></div>
                        </div>
                    </a>
                </li>
                
            </ul>
            <ul style="margin-top: 0.5rem;">
                <li>
                    <a href="javascript:;" class="item-content item-link" id="btnLogout">
                        <div class="item-inner" style="justify-content: center;">
                            <div class="item-title">退出系统</div>
                            <div class="item-after"></div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

    </script>

    <!-- 已报名列表 -->
    <script type="text/html" id="tmplCardList">
        <div class="content-block-title">{{title}}</div>
        <div style="margin-bottom: 3rem;">
            {{each items item index}}
            {{if category == 'history'}}
            <a href="javascript:;">
                <div class="card">
                    <div class="card-content">
                        <div class="card-content-inner" data_id="{{item.id}}">
                            <span>{{item.title}}</span>
                            <span class="pull-right color-gray">{{item.channelName}}</span>
                        </div>
                    </div>
                </div>
            </a>
            {{else}}
            <a href="#/{{category}}/{{item.id}}">
                <div class="card">
                    <div class="card-content">
                        <div class="card-content-inner" data_id="{{item.id}}">
                            <span>{{item.title}}</span>
                            <span class="pull-right color-gray">{{item.channelName}}</span>
                        </div>
                    </div>
                </div>
            </a>
            {{/if}}
            {{/each}}
        </div>
        <nav class="bar bar-tab" style="position: fixed;bottom: 0;padding-right: 0;padding-left: 0;height: auto;">
            <a href="#" class="big-nav">返回</a>
        </nav>
    </script>

    <!-- 报名详情 -->
    <script type="text/html" id="tmplDetails">
        <h2 class="text-center">要取消下面的报名?</h2>
        <p class="text-center">{{title}}</p>
        <div class="content-block">
            <p><span class="button button-big button-round button-primary" id="btnDel" data_id="{{id}}" data_category="{{category}}">确定</span></p>
            <p><a href="#/{{category}}" class="button button-big button-round">返回</a></p>
        </div>
    </script>

    <!-- 个人信息 -->
    <script type="text/html" id="tmplProfile">
        <div class="content-block-title">个人信息</div>
        <div class="list-block">
            <ul>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">姓名</div>
                            <div class="item-input">
                                <input type="text" id="txtDisplayName" placeholder="请输入您的真实姓名" value="{{displayName}}">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">手机</div>
                            <div class="item-input">
                                <input type="text" id="txtMobile" placeholder="请输入您的常用手机号" value="{{mobile}}">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">身份证</div>
                            <div class="item-input">
                                <input type="text" id="txtCitizenCode" placeholder="请输入您的身份证号码" value="{{citizenCode}}">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-block">
            <p><span class="button button-big button-round button-primary" id="btnSave">保存</span></p>
            <p><a href="#" class="button button-big button-round">返回</a></p>
        </div>
    </script>

    <script type='text/javascript' src='assets/js/zepto.min.js' charset='utf-8'></script>
    <script>
        $.config = { router: false };
    </script>
    <script type='text/javascript' src='assets/js/sm.min.js' charset='utf-8'></script>
    <!--<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>-->
    <script type="text/javascript" src="assets/js/template-web.js"></script>
    <script type="text/javascript" src="assets/js/director.min.js"></script>
    <script type="text/javascript" src="assets/js/axios-0.17.1.min.js"></script>
    <script type="text/javascript" src="assets/js/utils.js"></script>

    <script type="text/javascript">
        var instance = axios.create({

            headers: { 'X-SS-API-KEY': 'ced47c42-5377-4d7b-b805-0e9af6afd0c9' }
            //headers: { 'X-SS-API-KEY': '4bcc175a-c9fa-4c90-9f16-34cc0816d152' }
        });

        var user = {};

        $.init();

        var page = {
            GetMyContents: function (userId, parentId) {
                return instance.get('/api/ss.lndx.service/enrollment/' + userId + '/' + parentId);
            },
            GetMyCourses: function () {
                return page.GetMyContents(user.id, 2);
            },
            GetMyActivities: function () {
                return page.GetMyContents(user.id, 1);
            },
            GetDetail: function (id) {
                return instance.get('/api/ss.lndx.service/enrollment/' + id);
            },
            GetHistory: function () {
                return instance.get('/api/ss.lndx.service/enrollment/history/' + user.id);
            },
            RenderMenu: function () {
                var menus = {};
                var html = template("tmplMenu", menus);
                $(".content").html(html);
            },
            RenderMyCourses: function () {
                var actions = [];
                actions.push(page.GetMyCourses());
                axios.all(actions).then(axios.spread(function (coursesResp) {
                    console.log(coursesResp.data);
                    var data = {};
                    data.title = "我的课程";
                    data.items = [];
                    data.items = coursesResp.data.value;
                    data.category = "courses";
                    var html = template("tmplCardList", data);
                    $(".content").html(html);
                }));

            },
            RenderMyActivities: function () {
                var actions = [];
                actions.push(page.GetMyActivities());
                axios.all(actions).then(axios.spread(function (activitiesResp) {
                    console.log(activitiesResp.data);
                    var data = {};
                    data.title = "我的活动";
                    data.items = [];
                    data.items = activitiesResp.data.value;
                    data.category = "activities";
                    var html = template("tmplCardList", data);
                    $(".content").html(html);
                }));

            },
            RenderMyHistory: function () {
                var actions = [];
                actions.push(page.GetHistory());
                axios.all(actions).then(axios.spread(function (historyResp) {
                    console.log(historyResp.data);
                    var data = {};
                    data.title = "历史记录";
                    data.items = [];
                    data.items = historyResp.data.value;
                    data.category = "history";
                    var html = template("tmplCardList", data);
                    $(".content").html(html);
                }));

            },
            RenderDetails: function (category, id) {
                var actions = [];
                actions.push(page.GetDetail(id));
                axios.all(actions).then(axios.spread(function (contentResp) {
                    console.log(contentResp.data);
                    var content = {};
                    content = contentResp.data.value[0];
                    content.category = category;

                    var html = template("tmplDetails", content);
                    $(".content").html(html);
                }));

            },
            RenderProfile: function () {

                var data = {};
                var html = template("tmplProfile", data);
                $(".content").html(html);

                if (getCookie("lndx_user") === "") {
                    
                    window.location.href = "index.html";

                } else {
                    var html = template("tmplProfile", user);
                    $(".content").html(html);
                }
                
            },
            BindEvents: function () {
                $(".content").on("click", "#btnDel", events.CancelEnrollment.bind(this));
                $(".content").on("click", "#btnSave", events.UpdateProfile.bind(this));
                $(".content").on("click", "#btnLogout", events.Logout.bind(this));
            }
        };

        var events = {
            Logout: function () {
                var user = "";
                setCookie("lndx_user", user);
                window.location.href = "index.html";
            },
            CancelEnrollment: function (e) {
                var id = $(e.target).attr("data_id");
                var category = $(e.target).attr("data_category");

                var actions = [];
                actions.push(instance.post('/api/ss.lndx.service/enrollment/delete/' + id));
                axios.all(actions).then(axios.spread(function (deleteResp) {
                    if (category === "courses") {
                        //courses.splice(id, 1);
                        page.RenderMyCourses();
                    }
                    if (category === "activities") {
                        //activities.splice(id, 1);
                        page.RenderMyActivities();
                    }
                }));

            },
            UpdateProfile: function (e) {
                

                if ($("#txtDisplayName").val() === null || $("#txtDisplayName").val() === "") {
                    //显示错误提示
                    $.toast("请输入姓名");
                    return false;
                }

                if ($("#txtMobile").val() === null || $("#txtMobile").val() === "") {
                    //显示错误提示
                    $.toast("请输入手机号");
                    return false;
                }

                if ($("#txtCitizenCode").val() === null || $("#txtCitizenCode").val() === "") {
                    //显示错误提示
                    $.toast("请输入身份证号");
                    return false;
                }

                if (checkIDCard($("#txtCitizenCode").val()) === false) {
                    $.toast("身份证号可能有误");
                    return false;
                }

                user.displayName = $("#txtDisplayName").val();
                user.mobile = $("#txtMobile").val();
                user.citizenCode = $("#txtCitizenCode").val();

                instance.post("/api/ss.lndx.service/account/modify", (user)).then(function (response) {
                    setCookie("lndx_user", JSON.stringify(user), 7);
                    $.toast("保存成功");
                }).catch(function (error) {
                    $.toast(error.response.data.message);
                    return false;
                }).then(function () {

                });;
            }
        };

        $(document).ready(function () {

            user = JSON.parse(getCookie("lndx_user"));

            var routes = {
                "/": function () { page.RenderMenu(); },
                "/courses": function () { page.RenderMyCourses(); },
                "/activities": function () { page.RenderMyActivities(); },
                "/history": function () { page.RenderMyHistory(); },
                "/profile": function () { page.RenderProfile(); },
                "/courses/:id": {
                    on: function (id) {
                        page.RenderDetails("courses", id);
                    }
                },
                "/activities/:id": {
                    on: function (id) {
                        page.RenderDetails("activities", id);
                    }
                }
            };

            var router = Router(routes);
            router.configure({
                on: function () { page.BindEvents(); }
            });
            router.init("/");
        });


    </script>
</body>
</html>